<template>
    <div id="mainContent">
        <!-- 用户管理 -->
        <el-card class="box-card" style="margin-right:15px;">
            <el-row class="searchBox">
                <el-form :model="form" :inline="true" size="small" label-width="100px">
                    <el-form-item label="工号：">
                        <el-input v-model="form.name" size="small" placeholder="工号"></el-input>
                    </el-form-item>
                    <el-form-item label="部门：">
                        <el-input v-model="form.depa" size="small" placeholder="部门"></el-input>
                    </el-form-item>
                    <el-form-item label="科室：">
                        <el-input v-model="form.section" size="small" placeholder="科室"></el-input>
                    </el-form-item>
                    <el-form-item label="职务：">
                        <el-input v-model="form.roleName" size="small" placeholder="职务"></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名：">
                        <el-input v-model="form.userName" size="small" placeholder="用户姓名"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-button size="mini" type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col :span="12" :offset="10" style="text-align: right;">
                    <el-button size="mini" type="primary" @click="addUsers">新建</el-button>
                    <el-button size="mini" type="primary">导入</el-button>
                    <el-button size="mini" type="primary">导出</el-button>
                    <el-button size="mini" type="danger" @click="deleteLot(sels)">批量删除</el-button>
                </el-col>
                <el-col :span="1" :offset="1" style="text-align: right;">
                    <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
                </el-col>
            </el-row>

            <el-table :data="tableData" :key='tableKey' v-loading="loading" @selection-change="handleSelectionChange" border stripe height="460">
                <el-table-column type="selection" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column align="center" :key='item, index' v-for='(item, index) in filterColumnData' :resizable="false" 
                    :label="getTableHeaderLabel(item)" 
                    :prop="item" 
                    :min-width="getTableColumnWidth(item, index)" 
                    :sortable="getTableColumnSort(item)"
                    :fixed="getTableColumnFixed(item)" >
                    <template slot-scope="scope">
                        {{scope.row[item]}}
                        <el-tooltip v-if="item === 'user_field1'" class="item" effect="dark" content="重置密码" placement="top">
                            <el-button class="iconfont icon-zhongzhimima" type="primary" size="small" @click="resetPw"></el-button>
                        </el-tooltip>
                        <el-tooltip v-if="item === 'user_field1'" class="item" effect="dark" content="查看权限" placement="top">
                            <el-button class="iconfont icon-chakanquanxian" type="primary" size="small"></el-button>
                        </el-tooltip>
                        <el-button v-if="item === 'user_field1'" size="small" icon="el-icon-edit" @click="eidtUsers(scope.row)"></el-button>
                        <el-button v-if="item === 'user_field1'" type="danger" size="small" icon="el-icon-delete" @click="deleteRow(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新建账户信息 -->
            <add-user :show.sync="showUser" @updateTable="updateList"></add-user>
            <!-- 编辑账户信息 -->
            <edit-user :show.sync="showEditUser" @updateTable="updateList"></edit-user>

            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    import AddUser from 'dialog/system-manage/user-manage/add-user';
    import EditUser from 'dialog/system-manage/user-manage/edit-user';
    import { getUserService, setUserOperateService, setDeleteLotService } from 'service/system-manage/user-manage'
    export default {
        name: 'UserManage',
        components: {
            'jt-table-column-filter': JtTableColumnFilter,
            'add-user': AddUser,
            'edit-user': EditUser
        },
        data(){
            return {
                tableData: [],
                showUser: false,    // 新建账户信息
                showEditUser: false,    // 编辑账户信息
                loading: false,
                tableKey: 1,
                form: {
                    name: '',
                    depa: '',
                    section: '',
                    roleName: '',
                    userName: ''
                },
                sels: [],
                filterColumnData: [],
                tableHeaderArr: [],
                tableColumnWidth: [160, 210, 160, 220, 160, 210, 260, 200, 200],   //表格列宽度
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1
            }
        },
        mounted() {
            this.showList();
        },
        methods: {
            // 初始化列表
            showList() {
                let params = {"pageNum": 1, "pageSize": 10, "name": "", "depa": "", "section": "", "roleName": "", "userName": ""};
                this.getList(params);
            },
            formatter(row, column){
                return row.id;
            },
            // 获取表格多选的值
            handleSelectionChange(val){
                this.sels = val;
            },
            handleSizeChange(val){
                let params = {"pageNum": this.currentPage, "pageSize": val, "name":"", "depa":"", "section":"", "roleName":"", "userName":""};
                this.getList(params);
            },
            handleCurrentChange(val){
                let params = {"pageNum": val, "pageSize": this.pageSize, "name": "", "depa": "", "section": "", "roleName": "", "userName": ""};
                this.getList(params);
            },
            // 表头展示
            getTableHeaderLabel(str) {
                return this.getTableSomeValue(str, 'alias');
            },
            // 获取表格列的宽度
            getTableColumnWidth(str, index){
                return this.tableColumnWidth[index];
            },
            // 获取表格列是否是固定的
            getTableColumnFixed(str){
                return this.getTableSomeValue(str, 'fixed', 0);
            },
            // 获取表格列是否排序
            getTableColumnSort(str){
                return this.getTableSomeValue(str, 'sort');
            },
            // 获取表格表头，列宽度，列固定，列排序的值
            getTableSomeValue(str, keyName, isFixed){
                for (var value of this.tableHeaderArr) {
                    if (value['name'] == str) {
                        if(isFixed === 0){  
                            // 如果头部为操作栏
                            if(str == 'user_field1'){
                                return value.fixed == 'false' ? false : "right";
                            }
                        } else {
                            return value[keyName];
                        }
                    }
                }
            },
            // 查询
            search() {
                let params = {"pageNum": 1, "pageSize": 10, "name": this.form.name, "depa": this.form.depa, "section": this.form.section, "roleName": this.form.roleName, "userName": this.form.userName};
                this.getList(params);
            },
            // 更新列表
            updateList() {
                this.showList();
            },
            // 批量删除
            deleteLot(sels) {
                var selsRow = [];
                for(let item in sels) {
                    selsRow.push(sels[item].user_id);
                }
                setDeleteLotService(selsRow.toString())
                    .then((res) => {
                        this.showList();
                    });
            },
            // 新增账号信息
            addUsers() {
                this.showUser = true;
            },
            // 重置密码
            resetPw() {
                this.$confirm('是否重置该账户的密码？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                });
            },
            // 编辑账号信息
            eidtUsers(row) {
                // console.log(row)
                this.showEditUser = true;
            },
            // 删除
            deleteRow(row) {
                let params = {"userId": row.user_id, "name": "", "password": "", "userName": "", "mobile": "", "email": "", "remark": "", "type":"3"};
                setUserOperateService(params)
                    .then((res) => {
                        // console.log(res)
                        this.$emit('updateTable', true);   // 将选择的账户信息传递到父页面
                    });
            },
            // 获取列表
            getList(params) {
                this.loading = true;
                getUserService(params)
                    .then((res) => {
                        this.tableHeaderArr = res.data.tableHeaderArr;
                        this.tableData = res.data.pd.page.list;
                        this.pageSize = res.data.pd.page.pageSize;
                        this.pageTotal = res.data.pd.page.total;
                        this.currentPage = res.data.pd.page.pageNum;
                        this.loading = false;
                    });
            }
        }
    }
</script>